<template>
    <!-- pagesC/pages/user/selectWarehouse -->
    <view class="container">
        <view class="topsearch flex-y-center">
            <view class="f1 flex-y-center">
                <image class="img" src="/static/img/search_ico.png"></image>
                <input :value="keyword" placeholder="搜索城市仓" placeholder-style="font-size:30rpx;color:#C2C2C2" @confirm="searchConfirm" @input="searchChange"></input>
            </view>
            <view class="search-btn" @tap="searchbtn">
                <text>搜索</text>
            </view>
        </view>
        <view class="flex" style="margin-top: 28rpx;">
            <view>当前城市仓：</view>
            <view class="user-warehouse-name">宁波市海曙仓</view>
        </view>

        <view style="margin-top: 14rpx;">
            <view>
                选择省份
            </view>
            <view class="ware-house-province">
                <view v-for="item in provinceList" :key="item.id" class="ware-house-province-item">
                    {{item.name}}
                </view>
            </view>
        </view>

        <view style="margin-top: 14rpx;">
            <view>
                选择城市
            </view>
            <view class="ware-house-province">
                <view v-for="item in cityList" :key="item.id" class="ware-house-province-item">
                    {{item.name}}
                </view>
            </view>
        </view>

        <view style="margin-top: 14rpx;">
            <view>
                选择自提点
            </view>

            <view class="warehouse-province-item" v-for="item in warehouseList" :key="item.id">
                <view class="warehouse-item-name">
                    {{item.name}}
                </view>
                <view v-for="item2 in item.list" :key="item.id" class="warehouse-province-list">
                    <view class="warehouse-province-list-left">
                        <view class="flex justify-between">
                            <view>{{item2.itemName}}</view>
                            <view class="warehouse-province-list-address">当前距离11km</view>
                        </view>
                        <view class="flex" style="margin-top: 6rpx;">
                            浙江省宁波市海曙区XXX路XX号
                            <!-- <view>11</view>
                            <view>TEL</view>
                            <view>选它</view> -->
                        </view>
                    </view>
                    <view style="width: 30rpx;height: 100%;"></view>
                    <view class="warehouse-province-list-right">
                        <view class="flex align-center">
                            <view class="icon-address">11</view>
                            <view class="icon-tel">TEL</view>
                            <view class="select-item">选它</view>
                        </view>
                    </view>

                </view>
            </view>
        </view>

        <loading v-if="loading"></loading>
        <dp-tabbar :opt="opt"></dp-tabbar>
        <popmsg ref="popmsg"></popmsg>
    </view>
</template>

<script>
    var app = getApp();
    export default {
      data() {
        return {
            opt:{},
            loading:false,
            isload: false,
            provinceList:[
                {id:0,name:'浙江省'},
                {id:1,name:'江苏省'},
                {id:2,name:'上海市'},
                {id:3,name:'安徽省'},
            ],
            cityList:[
                {id:0,name:'杭州市'},
                {id:1,name:'宁波市'},
                {id:2,name:'温州市'},
                {id:3,name:'嘉兴市'},
                {id:4,name:'义乌市'},
                {id:5,name:'金华市'},
            ],
            warehouseList:[
                {
                    id:1,
                    name:'宁波市海曙仓',
                    list:[
                        {
                            id:1,
                            itemName:'天一广场自提点',
                            address:'宁波市海曙区XXX路XX号',
                            distance:'1.26'
                        },
                        {
                            id:2,
                            itemName:'天一广场自提点',
                            address:'宁波市海曙区XXX路XX号',
                            distance:'1.26'
                        }
                    ]
                },
                {
                    id:1,
                    name:'宁波市江东仓',
                    list:[
                        {
                            id:1,
                            itemName:'天一广场自提点',
                            address:'宁波市海曙区XXX路XX号',
                            distance:'1.26'
                        },
                        {
                            id:2,
                            itemName:'天一广场自提点',
                            address:'宁波市海曙区XXX路XX号',
                            distance:'1.26'
                        }
                    ]
                },
            ]
        };
      },
      computed: {
      },

        onLoad: function (opt) {
            this.opt = app.getopts(opt);
        },
        onPullDownRefresh: function () {
        },
        methods: {
        }
    };
</script>

<style lang="scss">
    @import "/main.css";
    .user-warehouse-name{
        color: rgba(8, 163, 70, 1);
    }
    .container{
        padding: 0 20rpx;
    }

    .topsearch{
        width:100%;
        padding: 14rpx 14rpx;
        background-color: white;
        margin-top: 32rpx;
    }
    .topsearch .f1{
        height:60rpx;
        border:0;
        flex:1;
    }
    .topsearch .f1 .img{width: 32rpx;height: 32rpx;margin-left:10rpx}
    .topsearch .f1 input{height:100%;flex:1;padding:0 20rpx;font-size:30rpx;color:#333;}
    .topsearch .search-btn{
        display:flex;
        align-items:center;
        justify-content: center;
        text-align:center;
        font-size:30rpx;
        color:#fff;
        background-color:#08A346;
        width: 100rpx;
        height: 60rpx;
        line-height: 60rpx;
    }

    .search-navbar {display: flex;text-align: center;align-items:center;padding:5rpx 0}
    .search-navbar-item {flex: 1;height: 70rpx;line-height: 70rpx;position: relative;font-size:28rpx;font-weight:bold;color:#323232}
    .search-navbar-item .iconshangla{position: absolute;top:-4rpx;padding: 0 6rpx;font-size: 20rpx;color:#7D7D7D}
    .search-navbar-item .icondaoxu{position: absolute;top: 8rpx;padding: 0 6rpx;font-size: 20rpx;color:#7D7D7D}
    .search-navbar-item .iconshaixuan{margin-left:10rpx;font-size:22rpx;color:#7d7d7d}
    .search-history {padding: 24rpx 34rpx;}
    .search-history .search-history-title {color: #666;}
    .search-history .delete-search-history {float: right;padding: 15rpx 20rpx;margin-top: -15rpx;}
    .search-history-list {padding: 24rpx 0 0 0;}
    .search-history-list .search-history-item {
        display: inline-block;height: 50rpx;line-height: 50rpx;padding: 0 20rpx;margin: 0 10rpx 10rpx 0;background: #ddd;border-radius: 10rpx;font-size: 26rpx;
    }

    .province-list{

    }
    .ware-house-province{
        display: flex;
        flex-wrap: wrap;
        margin-top: 14rpx;
    }
    .ware-house-province-item{
        width: 32%;
        text-align: center;
        background-color: #E5E5E5;
        height: 66rpx;
        line-height: 66rpx;
        margin-right: 14rpx;
        &:nth-child(3n){
            margin-right: 0rpx;
        }
        &:nth-child(n + 4){
            margin-top: 14rpx;
        }
    }
    .warehouse-province-list-address{
        color: #08A346;
    }
    .warehouse-province-item{
        background-color: white;
        &:nth-child(n + 3){
            margin-top: 45rpx;
        }
    }
    .warehouse-item-name{
        color: #08A346;
        height: 66rpx;
        line-height: 66rpx;
        margin-top: 20rpx;
        margin-left: 20rpx;
    }
    .warehouse-province-list{
        padding: 0 20rpx;
        display: flex;
        border: 1rpx solid #08A346;
        &:not(:first-child){
            margin-top: 6rpx
        }
    }
    .warehouse-province-list-left{
        width: 66%;
        height: 80rpx;
        font-size: 24rpx;
    }
    .warehouse-province-list-right{
        flex: 1;
        display: flex;
        justify-content: center;
    }
    .icon-address{
        width: 70rpx;
        height: 70rpx;
        margin-right: 16rpx;
    }
    .icon-tel{
        width: 70rpx;
        height: 70rpx;
        margin-right: 16rpx;
    }
    .select-item{
        border-radius: 8rpx;
        border: 1rpx solid #08A346;
        color: #08A346;
        width: 128rpx;
        height: 50rpx;
        line-height: 50rpx;
        text-align: center;
    }
</style>